<template>
  <div>
    <!-- <h1>   - - - - - - - 我是物流查询页面- - - - - - -  </h1> -->

    <input type="text" v-model="logistics_no" @keyup.enter='search' placeholder="根据快递单号查快递状态">  

    <h4>您查询到快递单号为：<span>{{danhao}}</span></h4>
    <h4>所属快递公司为：<span>{{logisticsName}}</span></h4>
    <h4>该快递当前状态为：<span>{{status}}</span></h4>

    <div class="box" v-for="item in logisticsMsg" :key="item.time">
        <p>{{item.time}}</p>
        <p>{{item.desc}}</p>
    </div>

  </div>
</template>


<script>

export default {
  data() {
    return {
      logistics_no:772003952133077,
      danhao:'',
      logisticsName:'',
      logisticsId:0,
      logisticsMsg:[],
      status:''

    };
  },
  methods: {
    search(){
        this.getMsg()
        
    },
    getMsg(){
      console.log(' 0 0 0 0 0 0 0 0 0 0 0 0 ')
      let _this = this
      let getName = function(arg){
        return _this.$axios.get('/logistics/discern?logistics_no='+arg)
      }
      let getId = function(arg){
        return _this.$axios.get('/logistics/type/search?name='+arg)
      }
    
        getName(_this.logistics_no).then(res=>{
          console.log(res.data)
          if(res.data.code === 1){

              _this.logisticsName = res.data.data.searchList[0].logisticsTypeName
              console.log('2 2 2 2 2 2 2 2 2 2 2 2 ')
              return getName(this.logistics_no)

          }else{
              _this.$toast('没有查询到相关快递信息，请输入正确到快递单号~~')
          }
        }).then(res=>{
          getId(_this.logisticsName).then(res=>{
            // console.log(res)
            _this.logisticsId = res.data.data[0].logisticsId
            console.log(_this.logisticsId)
            return getId(_this.logisticsName)
          }).then(res=>{
            _this.$axios.get('/logistics/details/search?logistics_no='+_this.logistics_no+'&logistics_id='+_this.logisticsId).then(res=>{
              console.log(res.data.data)

              _this.status = res.data.data.status
              _this.danhao = this.logistics_no
              _this.logisticsMsg = res.data.data.data.reverse()
              _this.logistics_no=''
            })

          })
        })

    }

  },
  mounted(){
    this.getMsg()
  }
};

</script>

<style lang="less" scoped>

input{
  width: 85%;
  line-height: 26px;
  display: block;
  margin: 15px auto;
  font-size: 16px;
  text-indent: 8px;
  color: #555;
  border-radius: 15px;
  border-color: #ccc;
  -webkit-appearance: none;
  &:focus{
    border-color: pink;
  }
}
h4{
  width: 85%;
  font-size: 13px;
  font-weight: 400;
  margin: 10px auto;
  color: #333;
  span{
    color: #307BFF;
    font-weight: 700;
    letter-spacing: 1px;
  }
}
.box{
  width: 85%;
  margin: 10px auto;
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 1;
  p:last-child{
    line-height: 1.5;
  }
}


</style>
